<template>
  <!-- 随机鸡汤文章 Begin -->
  <div class="m-b-50px flex flex-col flex-items-center">
    <!-- 文章类型 -->
    <div
      class="text-[--el-color-primary] text-18px font-700 tracking-2px text-center h-18px m-b-18px capitalize"
      style="font-family: &quot;Dancing Script&quot;, cursive"
    >
      Stories
    </div>
    <!-- 文章标签 -->
    <div class="flex line-clamp-1 m-y-6px">
      <div
        class="text-#000 dark:text-#D8D8D8 m-r-3px m-b-3px p-y-5px p-x-10px border-1px border-[--el-color-primary] border-solid rounded-4px text-#000 text-12px hover:text-[--el-color-primary] font-400 tracking-1px line-height-12px transition-all duration-600 transition-ease"
        style="font-family: &quot;Muli&quot;, sans-serif"
      >
        Beauty
      </div>
      <div
        class="text-#000 dark:text-#D8D8D8 m-r-3px m-b-3px p-y-5px p-x-10px border-1px border-[--el-color-primary] border-solid rounded-4px text-#000 text-12px hover:text-[--el-color-primary] font-400 tracking-1px line-height-12px transition-all duration-600 transition-ease"
        style="font-family: &quot;Muli&quot;, sans-serif"
      >
        Warm
      </div>
    </div>
    <!-- 文章标题 -->
    <div
      class="text-#1D1D1D dark:text-#D8D8D8 p-x-18px text-36px <xl:text-32px <lg:text-28px <md:text-24px font-600 transition-1500 h-72px line-height-46px text-center capitalize"
      style="font-family: &quot;Open Sans&quot;, sans-serif"
    >
      <div class="gradient-line">Every great design begins with an even better story</div>
    </div>
    <!-- 文章作者 -->
    <div
      class="text-center m-t-30px m-b-20px flex flex-row flex-justify-center flex-items-center"
      style="font-family: &quot;Muli&quot;, sans-serif"
    >
      <div
        class="border-1px border-solid border-[--el-color-primary] w-34px h-34px p-1px rounded-full m-r-10px flex flex-justify-center flex-items-center"
      >
        <el-image
          :src="avatarUrl"
          fit="cover"
          class="w-30px h-30px hover:opacity-70 rounded-full transition-all duration-600 transition-ease-in-out"
        >
          <template #error>
            <el-image :src="errorUrl" fit="contain" class="w-30px h-30px"></el-image>
          </template>
        </el-image>
      </div>
      <div class="flex flex-justify-center flex-items-center">
        <div
          class="text-13px text-#1D1D1D dark:text-#D8D8D8 hover:text-[--el-color-primary] transition-all duration-600 transition-ease"
        >
          于心
        </div>
        <div class="text-[--el-color-primary] text-13px m-x-3px font-bold">﹣</div>
        <div class="text-13px text-#4B4F56 dark:text-#D8D8D8">2025-05-20</div>
        <div class="text-[--el-color-primary] text-13px m-x-3px font-bold">﹣</div>
        <div class="text-13px text-#4B4F56 dark:text-#D8D8D8">50K Views</div>
      </div>
    </div>

    <!-- 文章图片 -->
    <div class="w-100% h-460px <sm:h-260px overflow-hidden">
      <el-image
        :src="articleZeroUrl"
        fit="cover"
        class="w-100% h-100% hover:transform-scale-102 transition-all duration-600 ease-in-out"
      >
        <template #error>
          <el-image :src="errorUrl" fit="contain" class="w-100% h-100%"></el-image>
        </template>
      </el-image>
    </div>
    <!-- 文章描述 -->
    <div
      class="m-t-6px m-b-20px text-15px text-center transition-all duration-400 ease-in-out text-#666 dark:text-#D8D8D8 line-clamp-3"
    >
      Every great design begins with an even better story, weaving innovation and emotion. It captures challenges and dreams,
      creating meaningful experiences that resonate deeply, bridging the gap between creator and audience, and inspiring new
      perspectives.
    </div>

    <!-- 文章详情 -->
    <div class="flex flex-justify-center">
      <div class="flex flex-items-center flex-justify-center">
        <div
          class="text-14px text-#000 dark:text-#D8D8D8 text-center font-500 border-solid border-1px border-[--el-color-primary] h-32px line-height-30px tracking-1px p-x-25px rounded-100px hover:text-#fff hover:bg-[--el-color-primary] capitalize transition-all duration-600 transition-ease"
        >
          ReadMore
        </div>
        <div class="border-l-2px border-l-solid border-l-#bfa278 h-26px m-x-42px"></div>
        <!-- 联系方式 -->
        <div class="flex flex-items-center flex-justify-between w-140px">
          <el-tooltip effect="light">
            <template #content>
              <div class="w-150px h-150px">
                <el-image :src="qqUrl" fit="cover" class="w-150px h-150px">
                  <template #error>
                    <el-image :src="errorUrl" fit="contain" class="w-150px h-150px"></el-image>
                  </template>
                </el-image>
              </div>
            </template>
            <div
              class="w-30px h-30px rounded-full bg-#BABABA hover:bg-[--el-color-primary] flex flex-items-center flex-justify-center"
            >
              <KoiSvgIcon name="koi-qq" width="20" height="20"></KoiSvgIcon>
            </div>
          </el-tooltip>
          <el-tooltip effect="light">
            <template #content>
              <div class="w-150px h-150px">
                <el-image :src="weixinUrl" fit="cover" class="w-150px h-150px">
                  <template #error>
                    <el-image :src="errorUrl" fit="contain" class="w-150px h-150px"></el-image>
                  </template>
                </el-image>
              </div>
            </template>
            <div
              class="w-30px h-30px rounded-full bg-#BABABA hover:bg-[--el-color-primary] flex flex-items-center flex-justify-center"
            >
              <KoiSvgIcon name="koi-weixin" width="20" height="20"></KoiSvgIcon>
            </div>
          </el-tooltip>
          <el-tooltip content="网易云" effect="light">
            <div
              class="w-30px h-30px rounded-full bg-#BABABA hover:bg-[--el-color-primary] flex flex-items-center flex-justify-center"
              @click="handleWyyUrl"
            >
              <KoiSvgIcon name="koi-wyy" width="20" height="20"></KoiSvgIcon>
            </div>
          </el-tooltip>
          <el-tooltip content="管理平台" effect="light">
            <div
              class="w-30px h-30px rounded-full bg-#BABABA hover:bg-[--el-color-primary] flex flex-items-center flex-justify-center"
              @click="handlePCUrl"
            >
              <KoiSvgIcon name="koi-pc" width="16" height="16"></KoiSvgIcon>
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>

  <!-- 骨架屏 Begin -->
  <div class="m-b-50px" v-if="false">
    <el-skeleton animated>
      <template #template>
        <div class="flex flex-col flex-items-center">
          <el-skeleton-item variant="text" class="w-80px h-18px m-b-18px" />
          <div>
            <el-skeleton-item variant="text" class="w-80px h-12px m-r-10px" />
            <el-skeleton-item variant="text" class="w-80px h-12px" />
          </div>
        </div>
        <el-skeleton-item variant="image" class="h-460px <sm:h-260px" />
        <div class="m-t-6px m-b-20px">
          <el-skeleton-item variant="text" />
          <el-skeleton-item variant="text" />
          <el-skeleton-item variant="text" />
        </div>
        <div class="flex flex-justify-center">
          <div class="flex flex-items-center flex-justify-center">
            <el-skeleton-item class="w-120px h-30px" />
            <el-skeleton-item class="w-2px h-26px m-x-42px" />
            <div class="flex flex-items-center flex-justify-between w-140px">
              <el-skeleton-item variant="circle" class="w-30px h-30px" />
              <el-skeleton-item variant="circle" class="w-30px h-30px" />
              <el-skeleton-item variant="circle" class="w-30px h-30px" />
              <el-skeleton-item variant="circle" class="w-30px h-30px" />
            </div>
          </div>
        </div>
      </template>
    </el-skeleton>
  </div>
  <!-- 骨架屏 End -->
  <!-- 随机鸡汤文章 End -->
</template>

<script setup lang="ts">
import errorUrl from "@/assets/images/error/404.png";

const articleZeroUrl = "https://pic1.zhimg.com/70/v2-4cddafa8b6cc09cc098aa283e5c994a4_1440w.avis?source=172ae18b&biz_tag=Post";
const avatarUrl = "https://pic3.zhimg.com/80/v2-cb928dab1abe5231fb87db69498de128_720w.webp";
const qqUrl = "https://picx.zhimg.com/80/v2-c7b2173572c3f71a9dae4f6896fd168d_720w.webp";
const weixinUrl = "https://pic2.zhimg.com/80/v2-455f78af11d6088d6ff71ece430a74c7_720w.webp";

/** 网易云 */
const handleWyyUrl = () => {
  window.open("https://music.163.com", "_blank");
};

/** 后台管理 */
const handlePCUrl = () => {
  window.open("http://117.72.208.215/login", "_blank");
};
</script>

<style scoped></style>
